<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>asdad</title>
		
		<link rel="stylesheet" href="css/Copy of det-almacen-pers.css" />
		<link rel="stylesheet" href="css/Copy of det-almacen-pers-conf.css" />
		<link rel="stylesheet" href="css/gen-general.css" />	
		
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function($){
				
				var trigger = 
				$("<div />").addClass("trig-info").append(
					$("<table />").append(
						$("<tr />").append(
							$("<td>",{
								"text"	:	"Codigo:"
							}).add(
								$("<td>").append(
									$("<span />",{
										"id"	:	"codi-nrou-" + item.nro_unico_cliente,
										"class"	:	"codi-desc",
										"text"	:	item.des_codigo_posicion
									}).append(
										$("<table />").append(
											$("<tr/>")
										)
									)
								)
							)
						).add(
							$("<tr />").append(
								$("<td>",{
									"text"	:	"Cliente:"
								}).add(
									$("<td>").append(
										$("<span />",{
											"id"	:	"clie-nrou-" + item.nro_unico_cliente,
											"class"	:	"clie-desc",
											"text"	:	item.des_rc_cliente
										})
									)
								)
							)
						).add(
							$("<tr />").append(
								$("<td>",{
									"text"	:	"Especie:"
								}).add(
									$("<td>").append(
										$("<span />",{
											"id"	:	"espe-nrou-" + item.nro_unico_especie,
											"class"	:	"espe-desc",
											"text"	:	item.des_especie
										})
									)
								)
							)
						).add(
							$("<tr />").append(
								$("<td>",{
									"colspan"	:	"2"
								})
							)
						).add(
							$("<tr />").append(
								$("<td>",{
									"text"	:	"Fecha:"
								}).add(
									$("<td>").append(
										$("<span />",{
											"id"	:	"fech-nrou-" + item.nro_unico_especie,
											"class"	:	"fech-desc",
											"text"	:	item.dat_fecha_um
										})
									)
								)	
							)
						)
					)
				);
				
				
				init_tol_tips();
				
				$("a").hover(function(){
					
				});
				
			});
			
			function init_tol_tips(){
				
				$(".xddddddd").live("mouseover",function(){
					
					$(this).find('.trig-info').show();

				}).live("mouseout",function(){
					
					$(this).find('.trig-info').hide();

				}).live("mousemove",function(e){
					
					var mousex = e.pageX + 20;
					var mousey = e.pageY + 20;
					var tipWidth = $(this).find('.trig-info').width();
					var tipHeight = $(this).find('.trig-info').height();
					var tipVisX = $(window).width() - (mousex + tipWidth);
					var tipVisY = $(window).height() - (mousey + tipHeight);
					
					if(tipVisX < 20){			
						mousex = e.pageX - tipWidth - 20;			
					}if(tipVisY < 20){			
						mousey = e.pageY - tipHeight - 20;			
					} 
					
					$(this).find('.trig-info').css({
						top:mousey,
						left:mousex
					});
					
				});
					
			}
			
		</script>
		<style type="text/css">
			.trig-info{
				display: none;
			}
			.trig-info td hr{
				margin: 0.9em 0em 0.5em 0em;
			}
		</style>
		
	</head>
	<body>
		<section id="area-visu">		
			
			<div class="xddd">
				<div class="xddddddd">xdxdxdxd
					<div class="trig-info">
						<table>
							<tr>
								<td>Codigo:</td>
								<td class="">10A0221</td>
							</tr>
							<tr>
								<td>Cliente:</td>
								<td>sadaddsad</td>
							</tr>
							<tr>
								<td>Especie:</td>
								<td>asdasdads</td>
							</tr>
							<tr>
								<td colspan="2"><hr /></td>
							</tr>
							<tr>
								<td>Fecha:</td>
								<td>asdasdads</td>
							</tr>
						</table>				
					</div>
				</div>
			</div>
			
			
		</section>
	</body>
</html>